<template>
  <u-picker :show="true" :title="title" ref="uPicker" :showToolbar="showToolbar" confirmColor="#417CE8" :columns="columns" @confirm="onConfirm" @cancel="onCancel" :confirmText="confirmButtonText" @onChange="onChange" :cancelText="cancelButtonText" :loading="loading" :defaultIndex="defaultIndex" :itemHeight="itemHeight" :visibleItemCount="visibleItemCount">
  </u-picker>
</template>

<script>
export default {
  name: "timePicker",
  props: {
    value: {
      type: Date,
      default: () => new Date()
    },
    minDate: {
      type: Date,
      default: () => new Date(new Date().getFullYear() - 5, 0, 1)
    },
    maxDate: {
      type: Date,
      default: () => new Date(new Date().getFullYear() + 5, 0, 1)
    },
    showToolbar: {
      type: Boolean,
      default: () => true
    },
    title: {
      type: String,
      default: () => ''
    },
    confirmButtonText: {
      type: String,
      default: () => '确认'
    },
    cancelButtonText: {
      type: String,
      default: () => '取消'
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    readonly: {
      type: Boolean,
      default: () => false
    },
    itemHeight: {
      type: Number || String,
      default: () => 44
    },
    visibleItemCount: {
      type: Number || String,
      default: () => 6
    }
  },
  data () {
    return {
      monthArr: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
      dayArr: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16',
        '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'
      ],
      defaultIndex: []
    };
  },
  mounted () {
  },
  computed: {
    columns: function () {
      let minYear = this.minDate.getFullYear();
      let maxYear = this.maxDate.getFullYear();
      let year = this.value.getFullYear();
      let month = this.value.getMonth();
      let day = this.value.getDate();
      let yearArr = [];
      let i = 0;
      while (i < maxYear - minYear + 1) {
        yearArr.unshift((maxYear - i) + '');
        i++;
      }
      this.defaultIndex = [Math.floor(year) - minYear, Math.floor(month), Math.floor(day - 1), 0, Math.floor(year) - minYear, Math.floor(month), Math.floor(day - 1)]
      let columns = [
        yearArr,
        this.monthArr,
        this.dayArr,
        ['-'],
        yearArr,
        this.monthArr,
        this.dayArr,
      ];
      return columns
    }
  },

  watch: {

  },

  methods: {
    onConfirm (value, index) {
      // console.log(`当前值：${value}, 当前索引：${index}`);
      this.$emit('confirm', value, index);
    },
    onChange (picker, value, index) {
      // console.log(`当前值：${value}, 当前索引：${index}`);
      let _this = this;

      let minMonth = this.minDate.getMonth();
      let minDay = this.minDate.getDate();
      let maxMonth = this.maxDate.getMonth();
      let maxDay = this.maxDate.getDate();
      let d = new Date(value[0], value[1], 0);

      setDate(0);
      setDate(4);

      function setDate (i) {
        //最小年份
        if (value[i] - 0 === _this.minDate.getFullYear()) {
          picker.setColumnValues(i + 1, _this.monthArr.slice(minMonth));
          let strMinM = '';
          if (minMonth < 9) {
            strMinM = '0' + (minMonth + 1)
          } else {
            strMinM = strMinM + 1 + ''
          }
          picker.setColumnValue(i + 1, value[i + 1] - 1 < minMonth ? strMinM : value[i + 1]);

          if (index === i && value[i + 1] - 1 < minMonth) {
            picker.setColumnValues(i + 2, _this.dayArr.slice(minDay - 1, d.getDate()));
            picker.setColumnValue(i + 2, value[i + 2] < minDay ? minDay.toString() : value[i + 2]);
          } else {
            if (value[i + 1] - 1 === _this.minDate.getMonth()) {
              picker.setColumnValues(i + 2, _this.dayArr.slice(minDay - 1, d.getDate()));
              picker.setColumnValue(i + 2, value[i + 2] < minDay ? minDay.toString() : value[i + 2]);
            } else {
              picker.setColumnValues(i + 2, _this.dayArr.slice(0, d.getDate()));
              picker.setColumnValue(i + 2, value[i + 2] > d.getDate() ? d.getDate().toString() : value[
                i + 2]);
            }
          }
        }
        //最大年份
        else if (value[i] - 0 === _this.maxDate.getFullYear()) {
          picker.setColumnValues(i + 1, _this.monthArr.slice(0, maxMonth + 1));
          let strManM = '';
          if (maxMonth < 9) {
            strManM = '0' + (maxMonth + 1)
          } else {
            strManM = maxMonth + 1 + ''
          }
          picker.setColumnValue(i + 1, value[i + 1] - 1 > maxMonth ? strManM : value[i + 1]);
          if (index === i && value[i + 1] - 1 > maxMonth) {
            picker.setColumnValues(i + 2, _this.dayArr.slice(0, maxDay));
            picker.setColumnValue(i + 2, value[i + 2] > maxDay ? maxDay.toString() : value[i + 2]);
          } else {
            if (value[i + 1] - 1 === _this.maxDate.getMonth()) {
              picker.setColumnValues(i + 2, _this.dayArr.slice(0, maxDay));
              picker.setColumnValue(i + 2, value[i + 2] > maxDay ? maxDay.toString() : value[i + 2]);
            } else {
              picker.setColumnValues(i + 2, _this.dayArr.slice(0, d.getDate()));
              picker.setColumnValue(i + 2, value[i + 2] > d.getDate() ? d.getDate().toString() : value[
                i + 2]);
            }
          }
        }
        //其他年份
        else {
          picker.setColumnValues(i + 1, _this.monthArr);
          picker.setColumnValue(i + 1, value[i + 1]);
          picker.setColumnValues(i + 2, _this.dayArr.slice(0, d.getDate()));
          picker.setColumnValue(i + 2, value[i + 2] > d.getDate() ? d.getDate().toString() : value[i + 2]);
        }
      }

      let finallyVal = picker.getValues();
      let len = Math.floor(finallyVal.length / 2);
      //开始时间不大于结束时间
      if (finallyVal.slice(0, len).join("") > finallyVal.slice(len + 1).join("")) {
        picker.setValues([...finallyVal.slice(0, len), "-", ...finallyVal.slice(0, len)]);
        if (new Date(finallyVal.slice(0, len).join("-") + ' 00:00:00').getTime() === this.maxDate.getTime()) {
          picker.setColumnValues(5, _this.monthArr.slice(0, maxMonth + 1));
          picker.setColumnValues(6, _this.dayArr.slice(0, maxDay));
        }
      }
      this.$emit('change', picker, finallyVal, index);
    },
    onCancel () {
      // console.log('取消');
      this.$emit('cancel');
    },
  },
}
</script>

<style scoped>
</style>
